| 有哪些方法能達(dá)到提高網(wǎng)速給用戶最好的體驗，眾說紛紜，大大小小的相關(guān)公司機(jī)構(gòu)都給出了不同的優(yōu)化措施，雅虎官方給出的優(yōu)化網(wǎng)站加速的方法就是比較權(quán)威代表。 1.MinimizeHTTPRequests減少HTTP請求 圖片、css、script、flash等等這些都會增加http請求數(shù)，減少這些元素的數(shù)量就能減少響應(yīng)時間。把多個JS、CSS在可能的情況下寫進(jìn)一個文件，頁面里直接寫入圖片也是不好的做法，應(yīng)該寫進(jìn)CSS里，利用CSSsprites將小圖拼合后利用background來定位。 2.UseaContentDeliveryNetwork利用CDN技術(shù) CDN確實是好東西，不過服務(wù)器提供商的這項服務(wù)一般是要收費(fèi)的。 3.AddanExpiresoraCache-ControlHeader設(shè)置頭文件過期或者靜態(tài)緩存 瀏覽器會用緩存來減少http請求數(shù)來加快頁面加載的時間，如果頁面頭部加一個很長的過期時間，瀏覽器就會一直緩存頁面里的元素。不過這樣如果頁面里的東西變動的話就要改名字了，否則用戶端不會主動刷新，這項可以通過修改.htaccess文件來實現(xiàn)。 4.GzipComponentsGzip壓縮 Gzip格式是一種很普遍的壓縮技術(shù)，幾乎所有的瀏覽器都有解壓Gzip格式的能力，而且它可以壓縮的比例非常大，一般壓縮率為85%。壓縮沒壓縮，可以到這里做下測試。 5.PutStylesheetsattheTop把CSS放頂部 讓瀏覽者能盡早的看到網(wǎng)站的完整樣式。 6.PutScriptsattheBottom把JS放底部 網(wǎng)站呈現(xiàn)完畢后再進(jìn)行功能設(shè)置，當(dāng)然這些JS要在你的加載過程中不影響內(nèi)容表現(xiàn)。 7.AvoidCSSExpressions避免CSSExpressions CSS表達(dá)式很可怕，這個只被IE支持的東西執(zhí)行時候的運(yùn)算量非常大，你移動一下鼠標(biāo)它都要進(jìn)行重計算的，但有時候為了做瀏覽器的兼容必須要用到這個IE6。 8.MakeJavaScriptandCSSExternal將JS和CSS外鏈 前面講到了緩存這個事情，一些較為公用的JS和CSS，我們可以使用外鏈的形式，譬如我就是從Google外鏈來的Jquery文件，如果我的瀏覽者在瀏覽別的使用了這個外鏈文件的網(wǎng)站時已經(jīng)下載并緩存了這個文件，那么他在瀏覽我的網(wǎng)站的時候就不需要再進(jìn)行下載了！ 9.ReduceDNSLookups減少DNS查找 是為了減少網(wǎng)站從外部調(diào)用資源，Google分析和picasa的外鏈圖片都算在里面了。 10.MinifyJavaScriptandCSS減小JS和CSS的體積 寫JS和CSS都是有技巧的，用最少的代碼實現(xiàn)同樣的功能，減少空白，增強(qiáng)邏輯性，用縮寫方式等等，當(dāng)然也有不少工具也能夠幫你實現(xiàn)這一點。 11.AvoidRedirects避免重定向 再寫入鏈接時，雖然”www.today-s-ooxx.com”和”www.today-s-ooxx.com/”僅有一個最后的”/”只差，但是結(jié)果是不同的，服務(wù)器需要花時間把前者重定向為后者然后進(jìn)行跳轉(zhuǎn)，這個要自己注意，也可以在Apache里用Alias或者mod_rewrite或者DirectorySlash解決。 12.RemoveDuplicateScripts刪除重復(fù)腳本 重復(fù)調(diào)用的代碼瀏覽器并不會識別忽略，而是會再次運(yùn)算一遍，這當(dāng)然是大大的浪費(fèi)。 13.ConfigureETags配置ETags 14.MakeAjaxCacheable緩存Ajax Ajax是實時響應(yīng)的，在瀏覽器接收到新的數(shù)據(jù)前，舊的數(shù)據(jù)被緩存，這樣能夠更好的提高效率。 15.FlushtheBufferEarly盡早的釋放緩沖 當(dāng)用戶進(jìn)行頁面請求時，服務(wù)器端需要花費(fèi)200到500毫秒時間來拼合HTML，將寫在head與body之間，釋放緩沖，這樣可以將文件頭先發(fā)送出去，然后再發(fā)送文件內(nèi)容，提高效率。 16.UseGETforAJAXRequests用GET方式進(jìn)行AJAX請求 Get方法和服務(wù)器只有一次交互(發(fā)送數(shù)據(jù))，而Post要兩次(發(fā)送頭部再發(fā)送數(shù)據(jù))。 17.Post-loadComponents延遲加載組件 最先加載必須的組件進(jìn)行頁面初始化，然后再加載其他，YUIImageLoader是很好的例子。 18.Preloadcomponents預(yù)加載組件 提前加載以后可能用到的東西，和延遲加載并不沖突，它的目的是為后續(xù)請求提供更快的響應(yīng)，參見Google首頁上的CSSsprites應(yīng)用。 19.ReducetheNumberofDOMElements減少DOM元素數(shù)量 復(fù)雜的頁面結(jié)構(gòu)意味著更長的下載及響應(yīng)時間，更合理更高效的使用標(biāo)簽來架構(gòu)頁面，是好的前端的必備條件。 20.SplitComponentsAcrossDomains跨域分離組件 頁面組件多個來源可以增大你的平行下載量，但注意不要過多，超過2-4個域名會引起上面說到的DNS查找浪費(fèi)。 21.MinimizetheNumberofiframes減少iframe數(shù)量 需要更有效的利用ifames。 iframe優(yōu)點：有利于下載緩慢的廣告等第三方內(nèi)容，安全沙箱，并行下載腳本 iframe缺點：即使為空也會有較大資源消耗，會阻止頁面的onload。 22.No404s不要出現(xiàn)404頁面 站點本身里(非搜索結(jié)果)出現(xiàn)404頁面，無意義的404頁面會影響用戶體驗并且會消耗服務(wù)器資源。 23.ReduceCookieSize減小Cookie Cookie在服務(wù)器及瀏覽器之間的通過文件頭進(jìn)行交換，盡可能減小Cookie體積，設(shè)置合理的過期時間，能夠很好的提高效率。 24.UseCookie-freeDomainsforComponents對組件使用無Cookie的域名 對靜態(tài)組件的Cookie讀取是一種浪費(fèi)，使用另一個無Cookie的域名來存放你的靜態(tài)組件式一個好方法，或者也可以在Cookie中只存放帶www的域名。 25.MinimizeDOMAccess減少DOM的訪問次數(shù) JS訪問DOM是很慢的，盡量不要用JS來設(shè)置頁面布局。 26.DevelopSmartEventHandlers開發(fā)靈活的事件處理句柄 DOM樹上過多的元素被加入事件句柄的話，反應(yīng)效率肯定會低，YUI事件工具有一個onAvailable方法可以幫助你靈活的設(shè)置DOM事件句柄 27.Chooseover@import使用而非@import 在IE中使用@import就和在頁面底部用一樣，要把放頂部的。 28.AvoidFilters避免過濾器的使用 如果需要Alpha透明，不要使用AlphaImageLoader，它效率低下而且只對IE6及以下的版本適用，用PNG8圖片。如果你非要使用，加上_filter以免影響IE7以上的用戶。 29.OptimizeImages優(yōu)化圖片 將你的GIF轉(zhuǎn)為PNG8會是個減小體積的好辦法，另外有很多方法處理你的JPG及PNG圖片以達(dá)到優(yōu)化效果。 30.OptimizeCSSSprites優(yōu)化CSSSprites 在CSSSprites中豎直并盡量緊湊的排列圖片，盡量將顏色相似的圖片排在一起，會減小圖片本身的大小及提高頁面圖片顯示速度。 31.Don’tScaleImagesinHTML不要在HTML中縮放圖片 圖片要用多大的就用多大的，1000X1000的圖片被width=”100″height=”100″以后，本身的KB數(shù)是不會減少的。 32.Makefavicon.icoSmallandCacheable縮小favicon.ico的大小并緩存它。站點的瀏覽器ICO應(yīng)該不是經(jīng)常換吧，那就長時間的緩存它，并且最好控制在1K以下。 33.KeepComponentsunder25K保證組件在25K以下。iPhone不能緩存25K以上的組件，并且這還是要在被壓縮前。 34.PackComponentsintoaMultipartDocument將組件打包進(jìn)一個多部分的文檔中，就好像在郵件中加入附件一樣，一個HTTP請求就夠了，但是這一技術(shù)需要確保代理支持，iPhone就不支持。 |
